class Compiler{
    constructor(vm){
        this.el = vm.$el;
        this.vm=vm
        this.compile(this.el)
    }
    // 编译模板
    compile(el){
        //所有节点
        let childNode=el.childNodes;
        Array.from(childNode).forEach(node=>{
            if(this.isTextNode(node)){
                this.compileText(node)
            }else if(this.isElementNode(node)){
                this.compileElement(node)
            }
            // 是否有子节点,递归判断
            if(node.childNodes&&node.childNodes.length){
                this.compile(node)
            }
        })
    }
    // 编译元素节点,处理指令
    compileElement(node){
        Array.from(node.attributes).forEach(attr=>{
            let attrName = attr.nodeName
            if(this.isDirective(attrName)){
                attrName= attrName.substr(2)
                let key = attr.value
           
                this.handle(node,key,attrName)
            }
        })
      
    }

    handle(node,key,methodName){
        console.log(methodName+'Updater')
        let updateFun = this[methodName+'Updater']
        updateFun&&updateFun.call(this,node,this.vm[key],key)
    }
    // v-text
    textUpdater(node,value,key){
        node.textContent = value;
          //创建监听 .当数据改变更新视图  
          new Watcher(this.vm,key,(newValue)=>{
            node.textContent = newValue
        })
    }
    // v-modal
    modelUpdater(node,value,key){
        node.value=value;
        node.addEventListener('input',()=>{
            this.vm[key]=node.value
        })
            //创建监听 .当数据改变更新视图  
            new Watcher(this.vm,key,(newValue)=>{
            node.value = newValue
        })
    }

    // v-html
    htmlUpdater(node,value,key){
        node.innerHTML =value;
            //创建监听 .当数据改变更新视图  
            new Watcher(this.vm,key,(newValue)=>{
            node.innerHTML = newValue
        })
    }

    // v-on
    onUpdater(node,value,key){
        node.addEventListener('click',()=>{
           let methods = this.vm.$options.methods
           if(methods&&methods[key]){
            methods[key]()
           }
        })
    }

    // 文本节点和差值表达式
    compileText(node){
        // ? 非贪婪模式 竟可能快的技术
        let reg = /\{\{(.+?)\}\}/g
        let content = node.textContent
        // console.log(reg.test(content))
        if(reg.test(content)){
            let key = RegExp.$1.trim()
            // console.log(key)
            node.textContent=content.replace(reg,this.vm[key])
            //创建监听 .当数据改变更新视图  
            new Watcher(this.vm,key,(newValue)=>{
                node.textContent = content.replace(reg,newValue)
            })
        }
      
    }
    // 判断是否指令
    isDirective(attrName){
        return attrName.startsWith('v-')
    }
    isTextNode(node){
        return node.nodeType===3
    }
    isElementNode(node){
        return node.nodeType===1
    }
}